<template>
    <div class="body">
        <el-descriptions title="新增权限" direction="vertical" :column="3" border>
            <template #extra>
                <el-popconfirm confirm-button-text='确认' @confirm="add()" cancel-button-text='取消' title="确认添加吗？">
                    <template #reference>
                        <el-button type="primary" size="small" plain>
                            新增
                        </el-button>
                    </template>
                </el-popconfirm>
            </template>
            <el-descriptions-item label="名称">
                <el-input v-model="data.name"></el-input>
            </el-descriptions-item>

            <el-descriptions-item label="url">
                <el-input v-model="data.url"></el-input>
            </el-descriptions-item>

            <el-descriptions-item label="上级名称">

                <el-input v-model="data.parent" :disabled="true" style="width:80%;"></el-input>
                <el-button v-if="data.parent!='无'" type="danger"  size="small" style="position:relative;left:10px"
                    @click="delpid()">删除</el-button>
                    <el-button v-else type="primary"  size="small" style="position:relative;left:10px"
                    @click="addpid()">恢复</el-button>
            </el-descriptions-item>

            <el-descriptions-item label="图标">
                <el-input v-model="data.icon"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="菜单">
                <el-switch v-model="data.isMenu" :active-value="1" :inactive-value="0" active-text="是"
                    inactive-text="否">
                </el-switch>
            </el-descriptions-item>
            <el-descriptions-item label="序号">
                <el-input-number :min="1" :max="99999" v-model="data.no"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="描述" :span="2">
                <el-input type="textarea" v-model="data.explain"></el-input>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup lang="ts">
import { addright } from '@/api/rights';
import type { Right_Dto } from '@/Dto/Request/right/right_Dto';
import router from '@/router';
import { ElMessage } from 'element-plus';
import { reactive, watchEffect } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const data = reactive<Right_Dto>({
    par:'',
    pid: '',
    parent: '',
    name: '',
    url: '',
    isMenu: '',
    icon: '',
    no: '',
    explain: ''
})
const methods = {
    async bind() {
            data.pid = route.params.id,
            data.parent = route.params.name
            data.par=route.params.name
    }
}

const add =async () => {
    if (data.parent === "无") {
        data.pid = '';
    }
    const res =await addright({
        parentid: data.pid,
        name: data.name,
        url: data.url,
        icon: data.icon,
        explain: data.explain,
        no: data.no,
        ismenu: data.isMenu
    })

    setTimeout(() => {
        router.go(-1);
    }, 800);
    ElMessage({
        message: '操作成功',
        type: 'success',
        plain: true,
    })

}
const addpid=()=>{
    data.parent=data.par
}
const delpid = () => {
    data.parent = "无";
}
watchEffect(() => {
    methods.bind();
})
</script>

<style scoped>
.body {
    padding: 10px;
}
</style>